<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试富文本编辑器</title>
    <script src="../js/jquery.min.js"></script>
    <script src="../plugin/ckeditor/ckeditor.js"></script>
    <link rel="stylesheet" href="../plugin/bootstrap/css/bootstrap.min.css">
    <script src="../plugin/bootstrap/js/bootstrap.min.js"></script>
    <!-- <script src="./plugin/ckeditor/ckeditor.js"></script> -->
    <script>
        $(function () {
            CKEDITOR.replace('content');
            $("#btn_sbm").click(function () {
                console.log("content:"+CKEDITOR.instances.content.getData())
                $.ajax({
                    url: '../pubnews/save',
                    dataType : "json",
                    type: 'POST',
                    cache: false,
                    //async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                    data: { 
                        author    : $("#author").val(),
                        title    : $("#title").val(),
                        content    : CKEDITOR.instances.content.getData()
                    },    //参数值
                    success: function (data) {
                        console.log(data)
                        if(data.result=="success"){
                            alert("保存成功")
                        }else{
                            alert("保存失败")
                        }
                    },
                    complete: function () {
                        alert("处理完毕，关闭模态框")
                        $("#myModal").modal('hide')
                    },
                    error: function () {
                        alert("服务器暂时不可用")
                    }
                });    
            })
        })
    </script>
</head>
<body>
    <textarea name="content" id="content">
</textarea>
    <!-- 按钮触发模态框 -->
    <div class="columns columns-right btn-group pull-right">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增新闻</button>
    </div>
    <form action="#" method="post" class="form-horizontal" role="form">
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">新增项目</h4>
                    </div>
                    <!--  {# 模态框body #} -->
                    <div class="modal-body" style="height: 100%;">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">主题</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="title" name="title" placeholder="请输入主题">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">作者</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="author" name="author" placeholder="请输入作者">
                            </div>
                        </div>
                    </div>
                    <!-- {#            模态框底部#} -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="button" class="btn btn-primary" value="提交" id="btn_sbm" />
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
    </form>
</body>
</html>